<template>
  <div class="context-menu-trigger">
    
    <ButtonIcon
      :id="triggerId" 
      class="trigger" 
      @click="toggleMenu"
      @keydown.enter="toggleMenu"
      @keydown.space.prevent="toggleMenu"
      tabindex="0"
    >
      <slot name="trigger">
        <EllipsisVerticalIcon />
      </slot>
    </ButtonIcon>
    
    <ContextMenuPlus
      v-if="isMenuOpen"
      :anchor="`#${triggerId}`"
      :position="position"
      :auto-close="true"
      @close="closeMenu"
    >
      <slot name="menu" />
    </ContextMenuPlus>
  
  </div>
</template>

<script setup lang="ts">

import { ref, onMounted, onBeforeUnmount } from 'vue'
import { EllipsisVerticalIcon } from 'lucide-vue-next'
import ContextMenuPlus, { type MenuPosition } from './ContextMenuPlus.vue'
import ButtonIcon from './ButtonIcon.vue'

const props = defineProps({
  position: {
    type: String as () => MenuPosition,
    default: 'below-right' as MenuPosition
  }
})

const isMenuOpen = ref(false)
const triggerId = ref('')

onMounted(() => {
  triggerId.value = `context-trigger-${Math.random().toString(36).substr(2, 9)}`
})

const toggleMenu = () => {
  isMenuOpen.value = !isMenuOpen.value
}

const closeMenu = () => {
  isMenuOpen.value = false
}

const handleEscape = (event: KeyboardEvent) => {
  if (event.key === 'Escape' && isMenuOpen.value) {
    closeMenu()
  }
}

onMounted(() => {
  document.addEventListener('keydown', handleEscape)
})

onBeforeUnmount(() => {
  document.removeEventListener('keydown', handleEscape)
})

defineExpose({
  closeMenu,
  toggleMenu,
  isMenuOpen: () => isMenuOpen.value
})

</script>

<style scoped>

.context-menu-trigger {
  position: relative;
  display: inline-block;
}

</style>